<template>
  <div class="details__container__content">
    <img :src="baseURL + goodsItem.img" alt="" />
    <h3>{{ goodsItem.name }}</h3>
    <van-rate v-model="rateValue" :size="14" color="#ffd21e" void-icon="star" void-color="#eee" readonly />
    <div class="control">
      <div class="price">
        <span>${{ goodsItem.originalPrice?.toFixed(2) }}</span>
        ${{ goodsItem.price?.toFixed(2) }}
      </div>
      <div class="count">
        <div @click="handleDelete" v-show="showControl()">
          <van-icon size="10rem" name="minus" />
        </div>
        <span v-show="showControl()">{{ showControl() }}</span>
        <div @click="handleAdd">
          <van-icon size="10rem" name="plus" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { baseURL } from "@/api/request";

import { GoodsItem } from "@/views/home/index.vue";
import type { ShopBagType } from "@/views/home/index.vue";
import { useShopBagStore } from "@/store";
import { storeToRefs } from "pinia";
import { withDefaults } from "vue";
interface Props {
  goodsItem: GoodsItem;
}
const { goodsItem } = withDefaults(defineProps<Props>(), {
  goodsItem: null,
});
const rateValue = defineModel<number>();
const store = useShopBagStore();
const { list: storeList } = storeToRefs(store);
const handleAdd = () => {
  store.addShopBagList(goodsItem);
};
function showControl() {
  return storeList.value.find((it: ShopBagType) => it.id === goodsItem.id && it.token === localStorage.getItem("token"))
    ?.count;
}
const handleDelete = () => {
  store.deleteShopBagList(goodsItem);
};
</script>

<style lang="scss">
.details__container__content {
  width: 100%;
  height: 226rem;
  margin-bottom: 20rem;
  box-sizing: border-box;
  padding: 0 20rem;
  position: relative;
  @include flex(column, center, auto);
  color: #333;

  h3 {
    font-size: 21rem;
    margin: 4rem 0;
  }

  .price,
  .count,
  h3 {
    position: relative;
  }

  .price {
    font-size: 16rem;

    span {
      font-size: 12rem;
      color: #a1a6a7;
      text-decoration: line-through;
    }
  }

  .control {
    @include flex($ai: center, $jc: space-between);
    width: 100%;
    margin-top: 6rem;
  }

  .count {
    margin-right: 8rem;
    @include flex($jc: center, $ai: center);
    font-size: 15rem;

    span {
      margin: 0 4rem;
    }

    div {
      height: 20rem;
      width: 20rem;
      background-color: white;
      @include flex($jc: center, $ai: center);
      border-radius: 50%;
    }
  }

  img {
    width: 168rem;
    height: 138rem;
    z-index: 1;
    position: relative;
  }

  &::before {
    height: 154rem;
    width: 328rem;
    content: "";
    border-radius: 12rem;
    background-color: $color-blue;
    @include absolutePOS($b: 0, $l: 0);
    z-index: 0;
  }
}
</style>
